<!--
**
**navbar组件
**
-->
<template>
  <div :class="navBarClass">
    <div :class="navBarClass">
      <div @click="onClickLeft" class="nav-bar__left">
        <van-icon
          :name="leftIcon"
          class="icon-list-size"
          v-if="leftIcon"
          size="0.5rem"
        ></van-icon>
      </div>
      <div class="nav-bar_title_left" v-if="titleLeft">
        {{ titleLeft }}
      </div>
      <div class="nav-bar__title_center" v-if="titleCenter">
        {{ titleCenter }}
      </div>
      <div @click="onClickRight" class="nav-bar__right">
        <van-icon
          size="0.5rem"
          :name="rightIcon"
          class="icon-list-size"
          v-if="rightIcon"
        ></van-icon>
      </div>
    </div>
    <div class="nar-border"></div>
    <share-sheet :show="showShare"></share-sheet>
  </div>
</template>
<script>
import shareSheet from "@c/shareSheet";
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
export default {
  naem: "navBar",
  props: {
    navBarClass: {
      type: String,
      default: "nav-bar"
    },
    leftIcon: {
      type: String,
      default: "arrow-left"
    },
    rightIcon: {
      type: String,
      default: "ellipsis"
    },
    titleCenter: {
      type: String
    },
    titleLeft: {
      type: String
    },
    titleRight: {
      type: String
    },
    titleRightIcon: {
      type: String
    }
  },
  data() {
    return {
      showShare: false
    };
  },
  components: {
    shareSheet
  },
  methods: {
    onClickLeft() {
      //   this.$toast("返回");
      this.$parent.handleClickLeft(this.leftIcon);
    },
    onClickRight() {
      //   this.$toast("按钮");
      // this.showShare = true;
      this.$parent.handleClickRight(this.rightIcon);
    },
    handleShow(val) {
      this.showShare = val;
    }
  }
};
</script>
<style scoped>
.nav-bar-white {
  z-index: 999;
  top: 0px;
  display: flex;
  position: fixed;
  height: 1rem;
  width: 10rem;
  line-height: 1rem;
  text-align: center;
  user-select: none;
  color: rgba(0, 0, 0, 1);
  background: #fff;
  border-bottom: 1px solid #f7f7f7;
}
.nav-bar {
  z-index: 999;
  display: flex;
  position: fixed;
  height: 1rem;
  width: 100%;
  line-height: 1rem;
  text-align: center;
  user-select: none;
  color: #fff;
  background: #39b3c0;
}
.nav-bar__left {
  left: 0.1rem;
}
.nav-bar__right {
  right: 0.1rem;
}
.nav-bar__left,
.nav-bar__right {
  position: absolute;
  bottom: 0;
  font-size: 0.3rem;
}
.nav-bar_title_left {
  left: 2rem;
}
.nav-bar_title_right {
  right: 2rem;
}
.nav-bar_title_left,
.nav-bar_title_right {
  position: absolute;
  font-weight: 500;
  font-size: 0.3rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-bar__title_center {
  max-width: 60%;
  margin: 0 auto;
  font-weight: 500;
  font-size: 0.4rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.icon-list-size {
  font-size: 24px;
  top: 8px;
}
.nar-border {
  width: 374px;
  height: 1px;
  border-bottom: 1px solid #f1f1f1;
  opacity: 0.9;
  margin-top: 44px;
  position: absolute;
}
</style>
